// 月报
import React from 'react';
import { Card, Row, Col, Form, DatePicker, Select, Button, Table, Modal, message, Pagination, Input, Radio, Icon } from 'antd';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import CommonPagination from 'components/pagination/index';
import { $http } from 'containers/config/https';
import Moment from 'moment';
import store from 'store';
import './style/index.less';
import {printStkReport} from '../commonPrint/stkPrint';
var standingNumber = 0; //月报单序列号

const { MonthPicker } = DatePicker;
const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {    // label 和input宽度
    labelCol: { span:7 },
    wrapperCol: { span: 17 },
};
var bilData = [];

const options = [
    { label:'按药品名称', value: 'drug' },
    { label: '按药品批次', value: 'batch' },
    { label: '按库存大类', value: 'stkCat' },
    { label: '按库存子类', value: 'stkSubCat' }
];
const optionsEnglish=[
    { label:'According to the drug name', value: 'drug' },
    { label: 'According to the drug batch', value: 'batch' },
    { label: 'According to the inventory category', value: 'stkCat' },
    { label: 'According to the Inventory subclass', value: 'stkSubCat' }
]

const optionsWithDisabled = [
    { label: '按进价', value: 'rp' },
    { label: '按售价', value: 'sp' }
];
const optionsWithDisabledEnglish = [
    { label: 'According to the purchase price', value: 'rp' },
    { label: 'According to the sales price', value: 'sp' }
]
const MonthlyMagazine = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            this.state = {
                userInfo: JSON.parse(window.sessionStorage.userData),
                data: [],
                queryCondition: {},
                SelectData: {},
                inOpLocDr:'',
                vendor: '',
                detailsId: '',//月报单ID
                detailsListData:[], //月报单明细数据
                WaListData: [], //月报单数据
                pageSize: 20,
                page: 1,
                pageSize2: 20,
                page2: 1,
                total:0,
                detailTotal: 0,
                show: false,
                stkTakeGroupID: '',
                blankFilling: false,
                value: 'drug',
                priceValue: 'rp',
                visible: false,
                modalColumns: [],
                detailWidthTotal: '',
                modificationList: false,  //默认隐藏修改表头弹窗
                titleList: 'StkRepDrug',
                columns:[],
                columnsWidth:'',
                ChineseEnglishSize:{},
                saveState: false, //月报生成按钮状态
            };

            // 药品的数据表头
            this.columns = [
                {
                    key: 1,
                    title: '科室',
                    dataIndex: 'locDesc',
                    align: "center",
                    width: '20%'
                },
                {
                    key: 2,
                    title: '月份',
                    dataIndex: 'startDate',
                    align: "center",
                    width: '20%'
                },
                {
                    key: 3,
                    title: '开始时间',
                    dataIndex: 'start',
                    align: "center",
                    width: '30%'
                },
                {
                    key: 4,
                    title: '截止时间',
                    dataIndex: 'end',
                    align: "center",
                    width: '30%'
                }
            ];
            // 月报单详细表头
            this.modalColumns = [
                {
                    key: 1,
                    title: '药品代码',
                    dataIndex: 'stockCode',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 2,
                    title: '药品名称',
                    dataIndex: 'stockDesc',
                    align: "center",
                    width: '200px'
                },
                {
                    key: 3,
                    title: '批号',
                    dataIndex: 'batNo',
                    align: "center",
                    width: '200px',
                },
                {
                    key: 4,
                    title: '本月结存数量',
                    dataIndex: 'endQty',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 5,
                    title: '本月结存金额',
                    dataIndex: 'endAmt',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 6,
                    title: '上月结存数量',
                    dataIndex: 'startQty',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 7,
                    title: '上月结存金额',
                    dataIndex: 'startAmt',
                    align: "center",
                    width: '100px',
                    editable: true,
                },
                {
                    key: 8,
                    title: '入库数量',
                    dataIndex: 'inRecQty',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 9,
                    title: '入库金额',
                    dataIndex: 'inRecAmt',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 10,
                    title: '出库数量',
                    dataIndex: 'transOutQty',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 11,
                    title: '出库金额',
                    dataIndex: 'transOutAmt',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 12,
                    title: '转入数量',
                    dataIndex: 'transInQty',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 13,
                    title: '转入金额',
                    dataIndex: 'transInAmt',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 14,
                    title: '退药数量',
                    dataIndex: 'stkRetQty',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 15,
                    title: '退药金额',
                    dataIndex: 'stkRetAmt',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 16,
                    title: '调整数量',
                    dataIndex: 'adjQty',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 17,
                    title: '调整金额',
                    dataIndex: 'adjAmt',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 18,
                    title: '报损数量',
                    dataIndex: 'scrapQty',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 19,
                    title: '报损金额',
                    dataIndex: 'scrapAmt',
                    align: "center",
                    width: '100px',
                },
                {
                    key: 20,
                    title: '规格',
                    dataIndex: 'manfDesc',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 21,
                    title: '门诊发药数量',
                    dataIndex: 'dispOutQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 22,
                    title: '门诊发药金额',
                    dataIndex: 'dispOutAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 23,
                    title: '门诊退药数量',
                    dataIndex: 'retOutQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 24,
                    title: '门诊退药金额',
                    dataIndex: 'retOutAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 25,
                    title: '住院发药数量',
                    dataIndex: 'dispInQty',
                    align: "center",
                    width: '150px',
                },    {
                    key: 26,
                    title: '住院发药金额',
                    dataIndex: 'dispInAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 27,
                    title: '住院退药数量',
                    dataIndex: 'retInQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 28,
                    title: '住院退药金额',
                    dataIndex: 'retInAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 29,
                    title: '调价损益数量',
                    dataIndex: 'adjPriceQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 30,
                    title: '调价损益金额',
                    dataIndex: 'adjPriceAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 31,
                    title: '入库损益数量',
                    dataIndex: 'inRecASPQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 32,
                    title: '入库损益金额',
                    dataIndex: 'inRecASPAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 33,
                    title: '转入损益数量',
                    dataIndex: 'transInASPQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 34,
                    title: '转入损益金额',
                    dataIndex: 'transInASPAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 35,
                    title: '退货损益数量',
                    dataIndex: 'stkRetASPQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 44,
                    title: '退货损益金额',
                    dataIndex: 'stkRetASPAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 36,
                    title: '门诊发药损益数量',
                    dataIndex: 'dispOutASPQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 37,
                    title: '门诊发药损益金额',
                    dataIndex: 'dispOutASPAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 38,
                    title: '门诊退药损益数量',
                    dataIndex: 'retOutASPQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 39,
                    title: '门诊退药损益金额',
                    dataIndex: 'retOutASPAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 40,
                    title: '住院发药损益数量',
                    dataIndex: 'dispInASPQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 41,
                    title: '住院发药损益金额',
                    dataIndex: 'dispInASPAmt',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 42,
                    title: '住院退药损益数量',
                    dataIndex: 'retInASPQty',
                    align: "center",
                    width: '150px',
                },
                {
                    key: 43,
                    title: '住院退药损益金额',
                    dataIndex: 'retInASPAmt',
                    align: "center",
                    width: '150px',
                },



            ]
        }


        componentDidMount() {
            // 初始化数据
            this.getInitialData();
            this.getDetailTableColumns('StkRepDrug');
            this.getTableColumnsAndForm();
            let leftList = document.querySelectorAll('.waListHeight  .ant-table-body');
            if(leftList.length>0){
                leftList[0].style.height = store.getState().tableHeight.y+5 + 'px';
            }
            let listData = document.querySelectorAll('.detailsHeight  .ant-table-body');
            if(listData.length>0){
                listData[0].style.height = store.getState().tableHeight.y+5 + 'px';
            }
        }

        // componentWillMount(){
        //     this.getInitialData();
        // }

        // 获取明系列表头数据
        getDetailTableColumns = (list) => {
            let {userInfo} = this.state;
            let data = {
                params: [{
                    compontName: list ? list : 'StkRepDrug',
                    type: 'C',
                }]
            }
            $http.post('urlS', this, {
                code: '01040073',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let arr = res.result.C&&res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
                            return  {
                                ...item,
                                key: index + 1,
                                title: <div onDoubleClick={() => {this.columnRef.onOpenModel();}}>{userInfo.language== 'EN' ? item.enDescripts : item.title}</div>
                            }
                        }) : '';
                        let filterArr = arr.filter(function(item){ return item.display === 'Y'});
                        this.setState({modalColumns: filterArr, detailWidthTotal: res.totalWidth})
                    }
                }
            })
        }

        // 获取单据跟form
        getTableColumnsAndForm = () => {
            let {userInfo} = this.state;
            let data = {
                params: [{
                    reactCode: ['MonthlyReport'],
                    compontName: 'MonthlyReport',
                    type: 'C',
                }]
            }
            $http.post('urlS', this, {
                code: '01040073',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let arr = res.result.C&&res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
                            return  {
                                ...item,
                                key: index + 1,
                                title: <div>{userInfo.language== 'EN' ? item.enDescripts : item.title}</div>
                            }
                        }) : '';
                        let filterArr = arr.filter(function(item){ return item.display === 'Y'});
                        this.setState({columns: filterArr, columnsWidth: res.totalWidth,ChineseEnglishSize:userInfo.language=='EN' ? res.result.language.EN : res.result.language.CN})
                    }
                }
            })
        };

        //清空表格内容
        handleReset = () => {
            this.setState({WaListData: [],detailsListData: [],total: 0, detailsId: ''});
            this.props.form.setFieldsValue({stockDr: undefined});
            this.props.form.resetFields();
        };

        // 获取界面默认值
        getInitialData() {
            let data = {
                params: []
            };
            // 获取下拉数据
            $http.post('urlS', this, {
                code: "02020176",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({SelectData: res})
                    }
                }
            })
        }

        // 获取月报单据列表数据
        getMonthlyMagazine=()=>{
            let {ChineseEnglishSize} = this.state;
            this.setState({loading: true})
            let qLocDr = this.props.form.getFieldValue('loc');
            let EndData = this.props.form.getFieldValue('EndData');
            let StartDate = this.props.form.getFieldValue('StartDate');
            let data = {
                params: [{
                    begin: StartDate ?  Moment(StartDate).format('YYYY-MM-DD') : undefined,
                    end: EndData ? Moment(EndData).format('YYYY-MM-DD') : undefined,
                    locID: qLocDr ? qLocDr : undefined,
                }],
                pagination: [
                    {
                        pageSize:this.state.pageSize,
                        currentPage:this.state.page,
                        sort:"ID",
                        dir:"asc",
                    }
                ],
            };
            $http.post('urlS', this, {
                code: "02020179",
                data: data,
                success: function (res) {
                    if(res.rows.length > 0){
                        for(var i = 0; i < res.rows.length; i++){
                            res.rows[i].key = i;
                            res.rows[i].start =  res.rows[i].startDate+'  ' + res.rows[i].startTime;
                            res.rows[i].end =  res.rows[i].endDate +'  '+ res.rows[i].endTime;
                        }
                        this.setState({ WaListData: res.rows,total: res.total, detailsId: res.rows[0].stkReportID,loading: false});
                        // standingNumber = 0;
                        this.getMonthDetails(res.rows[0].stkReportID)
                    }else {
                        this.setState({WaListData: [], detailsListData: []});
                        message.error(ChineseEnglishSize.MonthlyReportnoData ? ChineseEnglishSize.MonthlyReportnoData.descripts:"没数据")
                    }
                },
                error: function (err) {
                    message.error(err.errorMessage)
                }
            });
        };
        // 获取详情列表
        getMonthDetails() {
            this.setState({detailsLoading: true})
            let data = {
                params: [{
                    stkReportID: this.state.detailsId ? this.state.detailsId : undefined,
                    sortFlag:this.state.value ? this.state.value : undefined ,
                    priceFlag: this.state.priceValue ? this.state.priceValue : undefined
                }],
                pagination: [
                    {
                        pageSize:this.state.pageSize2,
                        currentPage: this.state.page2 ,
                        sort:"ID",
                        dir:"asc",
                    }
                ]
            };
            $http.post('urlS', this, {
                code: "02020180",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        for(let i = 0; i < res.rows.length; i++){
                            res.rows[i].key = i;
                            res.rows[i].purQtyDesc = res.rows[i].accPurQty + '  '+ res.rows[i].purUnitDesc;
                            res.rows[i].baseQtyDesc = res.rows[i].accBaseQty + '  '+ res.rows[i].baseUnitDesc;
                        }
                        bilData = JSON.parse(JSON.stringify(res.rows));   // 深拷贝
                        this.setState({detailsListData:res.rows, detailTotal: res.total, detailsLoading: false });
                    }
                }
            })
        }

        //删除
        deleteStatement=()=> {
            let data = {
                params: [{
                    stkReportID: this.state.detailsId ? this.state.detailsId : undefined,
                }]
            };
            // 获取下拉数据
            $http.post('urlS', this, {
                code: "02020178",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success(res.errorMessage);
                        this.getMonthlyMagazine();
                    }
                }
            })
        };

        // 获取到月报部门的值
        getInOpLocDr() {
            let inOpLocDr = this.props.form.getFieldValue('locDr');
            this.setState({inOpLocDr: inOpLocDr});
            return inOpLocDr
        }

        //点击行，渲染当前行样式
        setRowClassName = (record) => {
            standingNumber = standingNumber + 1;
            if(record){
                if(this.state.detailsId == record.stkReportID) return 'clickRowStyle';
                else return '';
            }else {
                return '';
            }
        };

        // 页码改变的回调，参数是改变后的页码及每页条数
        onChange = (page, pageSize) => {
            this.setState({page: page, pageSize: this.state.pageSize}, () => {
                // 重新调用查询方法
                this.getMonthlyMagazine();
            });
        };
        // 显示分页总条数
        showTotal(total) {
            return `共 ${total} 条`;
        }
        onShowSizeChange = (current, size) => {
            this.setState({page: current, pageSize: size}, () => {
                // 重新调用查询方法
                this.onChange(current,size);
            })
        };

        // 页码改变的回调，参数是改变后的页码及每页条数 月报单详情
        onChange2 = (page, pageSize) => {
            this.setState({page2: page, pageSize2: this.state.pageSize2}, () => {
                // 重新调用查询方法
                this.getMonthDetails(this.state.detailsId);
            });
        };

        onShowSizeChange2 = (current, size) => {
            this.setState({page2: current, pageSize2: size}, () => {
                // 重新调用查询方法
                this.onChange2(current,size);
            })
        };

        // 收起明细录入
        packUpHandle = () => {
            this.setState({show: !this.state.show, span: 24})
        };

        //显示新增月报弹窗
        addPaymentReceipt=()=>{
            const {resetFields,getFieldValue}=this.props.form;
            this.setState({   visible: true});
            resetFields(['locDesc','start','end']);
            const locID=getFieldValue('locDesc');
            this.getStartDate(locID);
        };
        getStartDate=(locID)=>{
            $http.post('urlS', this, {
                code: '02020240',
                data: {
                    params:[{
                        locID:locID
                    }]
                },
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({start:res.result});
                    }
                }
            })
        }

        //主页面保存
        saveHostData=()=>{
            this.setState({saveState: true})
            this.props.form.validateFields((errors, values) => {
                let obj = JSON.parse(JSON.stringify(values));
                if (errors == null) {
                    let data = {
                        params: [{
                            locID: obj.locDesc ? obj.locDesc : undefined,
                            startDate: obj.start ? Moment(obj.start).format('YYYY-MM-DD') : undefined,
                            startTime: obj.start ? Moment(obj.start).format('HH:mm:ss') : undefined,
                            endDate: obj.end ? Moment(obj.end).format('YYYY-MM-DD') : undefined,
                            endTime: obj.end ? Moment(obj.end).format('HH:mm:ss') : undefined,
                        }]
                    };
                    $http.post('urlS', this, {
                        code: "02020177",
                        data: data,
                        success: function (res) {
                            if (+res.errorCode === 0) {
                                message.success(res.errorMessage);
                                this.getMonthlyMagazine();
                                this.handleCancel();
                            }else {
                                this.setState({saveState: false})
                            }
                        }
                    })
                }
            })

        };

        //选择按条件查询（单选）
        onChangeRadio = e => {
            if(e.target.value == 'drug'){
                this.setState({titleList: 'StkRepDrug'});
                this.getDetailTableColumns('StkRepDrug')
            } else if(e.target.value == 'batch'){
                this.setState({titleList: 'StkRepBatch'});
                this.getDetailTableColumns('StkRepBatch')
            }else if(e.target.value == 'stkCat'){
                this.setState({titleList: 'StkRepCat'});
                this.getDetailTableColumns('StkRepCat')
            }else if(e.target.value == 'stkSubCat'){
                this.setState({titleList: 'StkRepSubCat'});
                this.getDetailTableColumns('StkRepSubCat')
            }

            this.setState({
                value: e.target.value,
                page2: 1,
            },()=> {
                this.getMonthDetails();
            });
        };
        //选择按价格条件查询（单选）
        onChangeRadioTo = e => {
            this.setState({
                priceValue: e.target.value,
                page2: 1,
            },()=>{
                this.getMonthDetails();
            });
        };

        // 关闭弹窗
        handleCancel = (e) => {
            this.setState({
                visible: false,
                status: undefined,
                saveState: false,
            });
        };

        getStartDateForm=()=>{
            let {ChineseEnglishSize} = this.state;
            //const params=this.state.SelectData.params;
            const {getFieldDecorator}=this.props.form;
            const {start:params}=this.state;
            let opt={
                initialValue: Moment(),
                rules:[{ required : ChineseEnglishSize.MonthlyReportstartDate ? ChineseEnglishSize.MonthlyReportstartDate.required =='Y'? true:false: false, message: ChineseEnglishSize.MonthlyReportstartDate ? ChineseEnglishSize.MonthlyReportstartDate.message:'开始时间不能为空'}]
            };
            let datePick=<DatePicker
                format="YYYY-MM-DD"/>;
            if (params){
                const {startDate,startTime}=params;
                if (startDate&&startTime){
                    opt.initialValue=Moment(startDate,'YYYY-MM-DD');
                    // opt.initialValue=Moment();
                    datePick=<DatePicker
                        disabled
                        format="YYYY-MM-DD"
                    />;
                }
            }
            //console.log(opt);
            return getFieldDecorator('start',opt)(datePick);
        }
        //组件权限编辑器
        onColumnRef = (ref) => {
            this.columnRef = ref;
        };

        //导出数据
        ExportData =()=>{
            if(!this.state.value){
                message.error('请选择导出的类型');
                return
            }
            let data ={
                params:[{
                    stkReportID:this.state.detailsId ? this.state.detailsId : '',
                    priceFlag:this.state.priceValue,
                    sortFlag:this.state.value ? this.state.value : undefined ,
                }]}
            $http.post('urlS', this, {
                code: "02020340",
                data: data,
                success: function (res) {
                    if(res.result.filePath){
                        document.getElementById("ifile").src = window.location.protocol + "//" + window.location.host + res.result.filePath;
                        message.success(ChineseEnglishSize.FamilyDoctorSigningStatisticsdownloading1 ? ChineseEnglishSize.FamilyDoctorSigningStatisticsdownloading.descripts:'正在导出...')
                    }else {
                        message.error(ChineseEnglishSize.FamilyDoctorSigningStatisticsnoDownloadYet1 ? ChineseEnglishSize.FamilyDoctorSigningStatisticsnoDownloadYet.descripts:'导出失败')
                    }
                }
            });
        };
        render() {
            const { getFieldDecorator} = this.props.form;
            const { modalColumns, detailWidthTotal,ChineseEnglishSize,columns,userInfo, columnsWidth} =this.state;
            //月报下拉列表
            let loc = [];
            let state = [];
            let takeGroup = [];
            this.state.SelectData.loc && this.state.SelectData.loc.map((item, i) => {
                loc.push(<Option value={item.id} key={i}>{item.descripts}</Option>)
            });
            this.state.SelectData.state && this.state.SelectData.state.map((item, i) => {
                state.push(<Option value={item.id} key={i}>{item.descripts}</Option>)
            });
            this.state.SelectData.takeGroup && this.state.SelectData.takeGroup.map((item, i) => {
                takeGroup.push(<Option value={item.id} key={i}>{item.descripts}</Option>)
            });

            return (
                <div className="MonthlyMagazine">
                    <Row>
                        <Card
                            size="small"
                            title={<div className="card-title-left-icon"><div></div>{ChineseEnglishSize.MonthlyReportmonthlyReport ? ChineseEnglishSize.MonthlyReportmonthlyReport.descripts:'月报'}</div>}
                        >
                            <Col span={11}>
                                <Row >
                                    <Col span={8} className="loc">
                                        <FormItem {...formItemLayout} label={ChineseEnglishSize.MonthlyReportloc ? ChineseEnglishSize.MonthlyReportloc.descripts:'科室'}>
                                            {getFieldDecorator('loc',{
                                                initialValue: this.state.userInfo.locID ? this.state.userInfo.locID : undefined,
                                                rules:[{ required : false, message: '科室不能为空'}]
                                            })(
                                                <Select allowClear={true}>
                                                    {loc}
                                                </Select>
                                            ) }
                                        </FormItem>
                                    </Col>
                                    <Col span={5} className="queryTime" style={{marginLeft: '30px'}}>
                                        <FormItem>
                                            {getFieldDecorator('StartDate',{
                                                initialValue: Moment(Moment().format('YYYY-MM-DD')),
                                                rules:[{ required : ChineseEnglishSize.MonthlyReportstartDate ? ChineseEnglishSize.MonthlyReportstartDate.required =='Y'? true:false: false, message: ChineseEnglishSize.MonthlyReportstartDate ? ChineseEnglishSize.MonthlyReportstartDate.message:'起初日期不能为空'}]
                                            })(
                                                <DatePicker  format="YYYY-MM-DD"/>
                                            ) }
                                        </FormItem>
                                    </Col>
                                    <Col span={1} style={{    textAlign: 'center', lineHeight: '37px'}}>
                                        <span>{ChineseEnglishSize.MonthlyReportto ? ChineseEnglishSize.MonthlyReportto.descripts:'到'}</span>
                                    </Col>
                                    <Col span={5}  className="queryTime">
                                        <FormItem>
                                            {getFieldDecorator('EndData',{
                                                initialValue: Moment(Moment().format('YYYY-MM-DD')),
                                                rules:[{ required : ChineseEnglishSize.MonthlyReportdeadline ? ChineseEnglishSize.MonthlyReportdeadline.required =='Y'? true:false: false, message: ChineseEnglishSize.MonthlyReportdeadline ? ChineseEnglishSize.MonthlyReportdeadline.message:'截至日期不能为空'}]
                                            })(
                                                <DatePicker  format="YYYY-MM-DD"/>
                                            ) }
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={4}  style={{marginLeft: '-50px'}}>
                                <Row style={{marginTop: '4px'}} className="buttonLeft">
                                    <Button onClick={this.getMonthlyMagazine}>{ChineseEnglishSize.MonthlyReportsearch ? ChineseEnglishSize.MonthlyReportsearch.descripts:'查询'}</Button>
                                </Row>
                            </Col>
                            <Col span={7} style={{textAlign: 'right'}}>
                                <iframe id="ifile" style={{display:'none'}}></iframe>
                                <Row style={{marginTop: '4px'}} className="buttonRight">
                                    <Button onClick={this.addPaymentReceipt}>{ChineseEnglishSize.MonthlyReportadd ? ChineseEnglishSize.MonthlyReportadd.descripts:'新增'}</Button>
                                    <Button style={{margin: '0 30px'}} disabled={this.state.WaListData.length > 0 ? false : true } onClick={this.deleteStatement}>{ChineseEnglishSize.MonthlyReportDelete ? ChineseEnglishSize.MonthlyReportDelete.descripts:'删除'}</Button>
                                    <Button type="dashed" disabled={this.state.detailsId ? false : true} onClick={this.ExportData}>{ChineseEnglishSize.MonthlyReportexport ? ChineseEnglishSize.MonthlyReportexport.descripts:'导出'}</Button> 
                                    <Button style={{margin: '0 30px'}} type="dashed" onClick={printStkReport.bind(this,this.state.detailsId,this.state.value,this.state.priceValue)}>{ChineseEnglishSize.MonthlyReportprint ? ChineseEnglishSize.MonthlyReportprint.descripts:'打印'}</Button>
                                </Row>
                            </Col>
                        </Card>
                    </Row>
                    <Row>
                        <Col span={8} style={{display: this.state.show ? 'none' : ''}} className={!this.state.show ? "animate-wrap active down-in" : "animate-wrap"}>
                            <Card
                                size="small"
                                title={<div className="card-title-left-icon"><div></div>{ChineseEnglishSize.MonthlyReportmonDoc ? ChineseEnglishSize.MonthlyReportmonDoc.descripts:'月报单据'}</div>}
                            >
                                <div className="drugList ">
                                    <Table
                                        columns={columns.length>0?columns:this.columns}
                                        dataSource={this.state.WaListData}
                                        pagination={false}
                                        bordered
                                        scroll={{x: columnsWidth? columnsWidth : 500, y: store.getState().tableHeight.y + 5}}
                                        rowClassName={this.setRowClassName}
                                        rowKey={record => record.key}
                                        className='waListHeight'
                                        onRow={(record) => {
                                            return {
                                                onClick: () => {
                                                    if (this.state.detailsId === '') {
                                                        // 保存行数据以及ID
                                                        this.setState({detailsId: record.stkReportID, blankFilling:false, page2: 1 },()=> {
                                                            this.getMonthDetails();
                                                        });
                                                    } else {
                                                        if (this.state.detailsId !== record.stkReportID ) {
                                                            this.setState({detailsId: record.stkReportID, blankFilling: false, page2: 1  },()=> {
                                                                this.getMonthDetails();
                                                            });
                                                        }else {
                                                            this.setState({detailsId: '', detailsListData: [] ,blankFilling: false })
                                                        }
                                                    }
                                                },
                                            };
                                        }}
                                    />
                                    <CommonPagination size='small' current={this.state.page} total={this.state.total} search= 'search'
                                                      onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.WaListData}
                                                      loading={this.state.loading} onChange={this.onChange.bind(this)} pageSize={true} />
                                </div>
                            </Card>
                        </Col>
                        <Col span={this.state.show ? 24 : 16}>
                            <Card
                                size="small"
                                title={<span><Icon onClick={this.packUpHandle} type={this.state.show ? 'double-right' : 'double-left'} />{ChineseEnglishSize.MonthlyReportreportDetail ? ChineseEnglishSize.MonthlyReportreportDetail.descripts:'月报单明细'}</span>}
                                extra={<span style={{color: '#fff'}} className='span' onClick={() => {this.columnRef.onOpenModel();}}><Icon type="setting" title={ChineseEnglishSize.MonthlyReportcolumnSettings ? ChineseEnglishSize.MonthlyReportcolumnSettings.descripts:'列权限设置'} /></span>}
                            >
                                <Row className="centerSelect" >
                                    <Col span={11} className="centerSelectLeft">
                                        <Radio.Group options={userInfo.language=='EN'?optionsEnglish:options} onChange={this.onChangeRadio} value={this.state.value} />
                                    </Col>
                                    <Col span={1} className="centerSelectCenter">|</Col>
                                    <Col span={7} className="centerSelectRight">
                                        <Radio.Group options={userInfo.language=='EN'?optionsWithDisabledEnglish:optionsWithDisabled} onChange={this.onChangeRadioTo} value={this.state.priceValue} />
                                    </Col>
                                </Row>
                                <div>
                                    <Table
                                        columns={modalColumns.length>0? modalColumns : this.modalColumns}
                                        dataSource={this.state.detailsListData}
                                        pagination={false}
                                        bordered
                                        scroll={{x:detailWidthTotal ? detailWidthTotal : 5900, y: store.getState().tableHeight.y - 35 }}
                                        rowKey={record => record.key}
                                        className='detailsHeight'
                                    />
                                    <CommonPagination size='small' current={this.state.page2} total={this.state.detailTotal} search= 'search'
                                                      onShowSizeChange={this.onShowSizeChange2.bind(this)} complete={true} dataSource={this.state.detailsListData}
                                                      loading={this.state.detailsLoading} onChange={this.onChange2.bind(this)} pageSize={true} />
                                </div>
                            </Card>
                        </Col>
                    </Row>
                    <Modal
                        title={ChineseEnglishSize.MonthlyReportnewMonReport ? ChineseEnglishSize.MonthlyReportnewMonReport.descripts:'新增月报'}
                        visible={this.state.visible}
                        onCancel={this.handleCancel}
                        width={400}
                        footer={null}
                    >
                        <div style={{height: '200px'}} className="monthPopup">
                            <Row style={{marginBottom: '24px'}}>
                                <form>
                                    <Row>
                                        <Col span={22}>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.MonthlyReportloc ? ChineseEnglishSize.MonthlyReportloc.descripts:'科室'}>
                                                {getFieldDecorator('locDesc',{
                                                    initialValue: this.state.userInfo.locID ? this.state.userInfo.locID : undefined,
                                                    rules:[{ required : false, message: '科室不能为空'}]
                                                })(
                                                    <Select allowClear={true} onChange={this.getStartDate}>
                                                        {loc}
                                                    </Select>
                                                ) }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    {/*<Row>*/}
                                    {/*<Col span={22}>*/}

                                    {/*<FormItem {...formItemLayout} label="月份">*/}
                                    {/*{getFieldDecorator('month',{*/}
                                    {/*initialValue: Moment(Moment().format('YYYY-MM')),*/}
                                    {/*rules:[{required: true, message: '月份不能为空'}]*/}
                                    {/*})(*/}
                                    {/*<MonthPicker format='YYYY-MM' />*/}
                                    {/*) }*/}
                                    {/*</FormItem>*/}
                                    {/*</Col>*/}
                                    {/*</Row>*/}
                                    <Row>
                                        <Col span={22}>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.MonthlyReportstartDate ? ChineseEnglishSize.MonthlyReportstartDate.descripts:'开始时间'}>
                                                {this.getStartDateForm()}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={22}>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.MonthlyReportdeadline ? ChineseEnglishSize.MonthlyReportdeadline.descripts:'截止时间'}>
                                                {getFieldDecorator('end',{
                                                    initialValue: Moment(),
                                                    rules:[{ required : false, message: '开始时间不能为空'}]
                                                })(
                                                    <DatePicker format="YYYY-MM-DD"/>
                                                ) }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </form>
                            </Row>
                            <Row style={{textAlign: 'center'}}>
                                <Button onClick={this.saveHostData} style={{background: 'rgba(255,255,255,1)'}} disabled={this.state.saveState}>{this.state.saveState ? '保存中...' : ChineseEnglishSize.MonthlyReportsave ? ChineseEnglishSize.MonthlyReportsave.descripts:'保存'}</Button>
                            </Row>
                        </div>
                    </Modal>
                    <ColumnAuthoritysModel
                        clientWidth='800px'
                        compontName={this.state.titleList ? this.state.titleList : 'StkRepDrug'}
                        configType="C"
                        onRef={this.onColumnRef}
                        reloadData={()=>{this.getDetailTableColumns(this.state.titleList)}}
                    />
                </div>
            )
        }
    }
);
export default MonthlyMagazine;